<template>



	<view class="login-page">
		<!-- <navgatsVue :navigationMsg="navigationMsg" style="z-index: 2;"></navgatsVue> -->
		<view class="navgation">
			<image src="/static/后退.png" style="width: 60rpx;height: 60rpx;margin-top: 20rpx;" @click="goback" mode="">
			</image>
		</view>
		<view class="login_title">
			<p>您好，请登录~</p>
		</view>
		<view class="loginBox">
			<view class="login_sjh">
				<image src="/static/手机 (1).png" style="width: 50rpx;height: 50rpx;" mode=""></image>
				<p style="font-size: 30rpx;line-height: 50rpx;margin-left: 20rpx;">手机号</p>
			</view>
			<view class="usernameBox">
				<u--input v-model="value1" @blur="iphones(value1)" style="height: 80rpx;" placeholder="请输入手机号"
					border="bottom" clearable></u--input>
			</view>
			<view class="login_sjh">
				<image src="/static/编组 25.png" style="width: 47rpx;height: 47rpx;" mode=""></image>
				<p style="font-size: 30rpx;line-height: 50rpx;margin-left: 20rpx;">验证码</p>
			</view>
			<view class="passwordBox">
				<u--input v-model="value2" @blur="dxyzms(value2)" style="height: 80rpx;width: 300rpx;"
					placeholder="请输入验证码" border="bottom" clearable></u--input>
				<view class="login_yz">
					<view class="login_yzs" @click="fsyzms">
						<p>{{ formattedTime }}</p>
					</view>
				</view>
			</view>
			<u-button :disabled="disabled" class="login-btn" @click="login" color="#fbd748" type="primary" size="large"
				text="登录"></u-button>
			<view class="login_bbtom">
				<checkbox style="line-height: 95rpx;" :checked="isChecked" @click="toggleChecked" />
				<p>我已阅读并同意 <span style="color:#FCD74A;">《服务协议》</span>和<span style="color:#FCD74A;">《隐私条款》</span></p>
			</view>
			<!-- <image :src="images" @click="getCode" style="flex: 1;" mode=""></image> -->
			<u-popup :show="show" mode="center" :round="10" @close="close" @open="open">
				<view class="login_poper">
					<view class="poper_toptitle">
						<p>图形验证</p>
					</view>
					<view class="poper_ipts">
						<u--input v-model="value" @blur="blurs(value)" style="height: 80rpx;" placeholder="请输入下图中图形验证码"
							border="bottom" clearable></u--input>
					</view>
					<view class="poper_images">
						<image class="poper_img" :src="images" mode=""></image>
						<p class="poper_ps" @click="getCode">看不清，换一张</p>
					</view>
					<view class="poper_btn">
						<view class="poperbtn_left" @click="close">
							<p>取消</p>
						</view>
						<view class="poperbtn_right" @click="login_yzm">
							<p>确定</p>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>

</template>

<script setup>
	import {
		Collent,
		Details,
		Yzas,
		Swiper,
		Kewords,
		Brand,
		Page,
		Update,
		Issue,
		Logins,
		Login,
		Check,
		User,
		Setting,
		Classify,
		Search
	} from "../../api/api.js"
	import {
		v4 as uuidv4
	} from 'uuid';
	import Base64 from 'base-64';
	export default {
		data() {
			return {
				show: false,
				securityCode: '1123',
				images: "",
				data: 18694047882,
				disabled: true,
				value: "",
				value1: "",
				value2: "",
				isChecked: false,
				ids: "",
				times: "获取验证码",
				timer: null, // 定时器
				seconds: 60, // 初始秒数
				isCounting: false, // 是否正在倒计时
				formattedTime: ""

			}
		},
		computed: {
			// 格式化显示时间（补零）
			// formattedTime() {
			// 	return `${this.seconds.toString().padStart(2, '0')} 秒`;
			// }
		},
		beforeDestroy() {
			clearInterval(this.timer);
		},
		onShow() {
			this.formattedTime = this.times
		},
		methods: {
			blurs(value) {
				console.log(value)
			},
			// 开始倒计时
			startCountdown() {
				if (this.isCounting) return;
				this.isCounting = true;
				this.timer = setInterval(() => {
					if (this.seconds > 0) {
						this.formattedTime = this.seconds
						this.seconds--;
					} else {
						this.stopCountdown();
						uni.showToast({
							title: '验证码失效',
							icon: 'none'
						});
					}
				}, 1000);
			},
			// 停止倒计时
			stopCountdown() {
				clearInterval(this.timer);
				this.formattedTime = "重新获取"
				this.isCounting = false;
				this.seconds = 60; // 重置时间
			},
			// async inputs(){
			// 	// console.log(this.value)
			// 	let data={
			// 		mobile: "18694047882", 
			// 		keep: false, 
			// 		sms_code: this.value, 
			// 		template_code: "register_login" 
			// 	}
			// 		let res=await Logins(data)
			// 		console.log(res)
			// 		},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			// 手机号验证
			iphones(value1) {
				console.log(value1)
			},
			// 点击发送验证码
			fsyzms() {
				this.show = true
				this.getCode()
			},
			// 短信验证码输入框
			dxyzms(value2) {
				console.log(value2)
			},
			toggleChecked() {
				this.isChecked = !this.isChecked;
			},
			// 点击验证码效验登陆注册
			async login_yzm() {
				// console.log(this.value1,"111")
				// console.log(this.value2,"2222")

				console.log(uuidv4())
				// let ids=uuidv4()
				console.log(this.ids)
				let data = {
					mobile: this.value1,
					template_code: "register_login",
					captchaInfo: this.value,
					captchaId: this.ids
				}
				let res = await Login(data)
				console.log(res)
				console.log(res.data.code)
				if (res.data.code == 1) {
					this.disabled = false
					console.log("发送验证码成功")
					this.show = false
					this.startCountdown()

				} else if (res.data.code == 0) {
					this.show = false
					uni.showToast({
						title: '发送太过频繁，请稍后再试',
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: '验证码错误',
						icon: 'none'
					});
				}

			},
			goback() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			//登录
			async login() {
				// console.log(this.value2)
				if (this.isChecked == true) {
					let data = {
						mobile: this.value1,
						keep: false,
						sms_code: this.value2,
						template_code: "register_login"
					}
					let res = await Logins(data)
					console.log(res, "登陆成功信息")
					uni.setStorageSync('token', res.data.data.userInfo.token)
					uni.switchTab({
						url: `/pages/index/index`
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '您需要同意服务与隐私协议',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								this.isChecked = true
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});

				}

			},

			arrayBufferToBase64(buffer) {
				console.log(buffer, "1234")
				let binary = '';
				const bytes = new Uint8Array(buffer);
				for (let i = 0; i < bytes.byteLength; i++) {
					binary += String.fromCharCode(bytes[i]);
				}
				return btoa(binary); // 转为 Base64
			},
			async getCode() {

				let data = uuidv4()
				this.ids = data
				let res = await Yzas(data)
				// console.log('funck',res)

				this.images = res.data
				// console.log(res.data)
				// responseType: 'blob', // 指定返回 Blob
				// console.log(this.arrayBufferToBase64(res.data),"111")
				// this.images=base64

			}
		}
	}
</script>

<style scoped lang="scss">
	.login-page {
		width: 100vw;
		height: 100vh;
		background-image: radial-gradient(circle, #f9f0e1, #f8e1ad);
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;

		.navgation {
			width: 100%;
			height: 100rpx;
			display: flex;
		}

		.login_title {
			width: 80%;
			height: 100rpx;
		}

		.login_title p {
			font-size: 35rpx;
			line-height: 100rpx;
		}

		.login_sjh {
			width: 100%;
			display: flex;
			margin-top: 40rpx;
		}

		.logo {
			font-size: 40rpx;
			font-weight: bold;
			margin-top: 20vh;
		}

		.loginBox {
			width: 80%;
			height: 200rpx;
			margin-top: 20vh;

			.usernameBox {
				width: 100%;
				height: 100rpx;
			}

			.passwordBox {
				width: 100%;
				height: 100rpx;
				margin-top: 10rpx;
				display: flex;
			}

			.login_yz {
				width: 300rpx;
				height: 100rpx;
				border-bottom: 1px solid #ccc;


			}

			.login_yzs {
				width: 300rpx;
				height: 80rpx;
				background-color: #ccc;
				border-radius: 50rpx;
				margin-top: 10rpx;
			}

			.login_yzs p {
				font-size: 30rpx;
				line-height: 80rpx;
				text-align: center;
			}

			.login-btn {
				margin-top: 100rpx;
				border-radius: 50rpx;
			}

			.forget-password {
				width: 100%;
				height: 50rpx;
				margin-top: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				>span {
					font-size: 24rpx;
					color: #acacac;
				}

			}

		}

		.login_poper {
			width: 80vw;
			height: 33vh;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
		}

		.poper_toptitle {
			width: 80%;
			height: 150rpx;

		}

		.poper_toptitle p {
			font-size: 50rpx;
			font-weight: bold;
			/* 加粗文本 */
			line-height: 150rpx;
		}

		.poper_ipts {
			width: 80%;
			height: 100rpx;
		}

		.poper_images {
			width: 80%;
			height: 100rpx;
			display: flex;
			margin-top: 20rpx;
		}

		.poper_img {
			width: 50%;
			height: 100%;
		}

		.poper_ps {
			width: 50%;
			height: 100%;
			line-height: 100rpx;
		}

		.poper_btn {
			width: 80%;
			height: 100rpx;
			position: absolute;
			bottom: 13rpx;
			display: flex;
		}

		.poperbtn_left {
			width: 50%;
			height: 100%;
			// background-color: #ffffff;
			border-top: 1px solid #ccc;
			border-right: 1px solid #ccc;
		}

		.poperbtn_left:hover {
			// background-color: #ccc;
		}

		.poperbtn_left p {
			font-size: 30rpx;
			text-align: center;
			line-height: 100rpx;
		}

		.poperbtn_right {
			width: 50%;
			height: 100%;
			border-top: 1px solid #ccc;

		}

		.poperbtn_right p {
			font-size: 30rpx;
			text-align: center;
			line-height: 100rpx;
			color: #FCD749;
		}

		.login_bbtom {
			width: 80%;
			height: 100rpx;
			position: absolute;
			bottom: 0;
			display: flex;

			text-align: center;
			line-height: 100rpx;
		}

		.login_bbtom p {
			font-size: 25rpx;
		}
	}
</style>